<template>
    <div id="index">
        <input type="text" v-model="searchText"> <button @click="findNext">查找下一个</button>
        <div id="xterm-container" style="width: 100vw;height: 60vh">
        </div>
    </div>
</template>
<script>
    import 'xterm/css/xterm.css'
    import {Terminal} from 'xterm';
    import {WebLinksAddon} from 'xterm-addon-web-links';
    import {SearchAddon} from 'xterm-addon-search';
    // import { FitAddon } from 'xterm-addon-fit';


    export default {
        name: 'Index',
        data() {
            return {
                searchText: "",
                searchAddon:null
            }
        },
        mounted() {
            const terminal = new Terminal({
                cursorBlink: true, // 光标闪烁
                cursorStyle: "bar", // 光标样式  null | 'block' | 'underline' | 'bar'
                scrollback: 800, //回滚
                tabStopWidth: 8, //制表宽度
                screenKeys: true
            });
            terminal.loadAddon(new WebLinksAddon());//连接可以点击跳转
            const searchAddon = new SearchAddon();
            terminal.loadAddon(searchAddon);
            this.searchAddon = searchAddon;

            terminal.open(document.getElementById('xterm-container'));
            terminal.write("请等待建立ssh连接 \r\n");

            let wsconn = new WebSocket("ws://127.0.0.1:1994/webssh");

            wsconn.onopen = function () {
                wsconn.send(JSON.stringify({
                    operate: 'connect',
                    host: '58.33.132.54',//IP
                    port: '2022',//端口号
                    username: 'root',//用户名
                    password: 'Tech1211!@#',//密码
                }));
            }

            wsconn.onmessage = function (evt) {
                var data = evt.data.toString();
                //data = base64.decode(data);
                terminal.write(data);
            };


            terminal.onData(data => {
                wsconn.send(JSON.stringify({
                    "operate": "command",
                    "command": data
                }))
            });

        },
        methods:{
            findNext:function () {
                console.log("findNext:"+this.searchText);
                this.searchAddon.findNext(this.searchText);
            }
        }
    }
</script>
